$(function(){
	setting();
	setTimeout(doScroll, 100);
});

function setting(){
	tilt();

	var agent = navigator.userAgent;
	
	if (agent.search(/iPhone/) != -1) {
	    $("body").addClass("iphone");
	    window.onorientationchange = tilt;
	} else if (agent.search(/Android/) != -1) {
	    $("body").addClass("android");
	    window.onresize = tilt;
	} else if (agent.search(/iPad/) != -1) {
	    window.onresize = initIpad;
	}
}

function initIpad() {
    var orientation = window.orientation;
    var widthRecipe = 0;
    var style = '';
    //$("section").css("min-height", $(window).height()-130);
    if (orientation == 0) {
        $("body").addClass("portrait");
        $("body").removeClass("landscape");
        widthRecipe = ($(window).width() - 10) / 3;
        addClass(widthRecipe, widthRecipe + widthRecipe / 4);
    } else {
        $("body").addClass("landscape");
        $("body").removeClass("portrait");
        widthRecipe = ($(window).width() - 10) / 4;
        addClass(widthRecipe, widthRecipe + widthRecipe / 5);

    }
    
}


function tilt(){
    var orientation = window.orientation;
    var widthRecipe = 0;
    var style = '';
    //$("section").css("min-height", $(window).height()-130);
    if (orientation == 0) {
        $("body").addClass("portrait");
        $("body").removeClass("landscape");
        widthRecipe = ($(window).width() - 10) / 2;
        addClass(widthRecipe, widthRecipe + widthRecipe/3);
    } else {
        $("body").addClass("landscape");
        $("body").removeClass("portrait");
        widthRecipe = ($(window).width() - 10) / 3;
        addClass(widthRecipe, widthRecipe + widthRecipe / 3);

    }
    //setHeightContent();

}

function doScroll() {
	if (window.pageYOffset === 0) { window.scrollTo(0,1); }
}

function addClass(widthRecipe, heightRecipe) {
    var heightRecipe = widthRecipe + widthRecipe / 5;
    var recipeDetail = $(window).width() - 10;
    var marginTop = heightRecipe - 40;
    var marginLeft = widthRecipe - 40;
    style = '<style>.image-recipe { height:' + heightRecipe + 'px' + ';width:' + widthRecipe + 'px' + ';float:left;}';
    style += '.iconAdd {position:absolute;  cursor: pointer; margin-top:' + marginTop + 'px;' + 'margin-left:' + marginLeft + 'px;}';
    style += '.iconFavorite {position:absolute;  cursor: pointer;margin:0px 0px 0px 10px; margin-top:' + marginTop + 'px;}';
    style += '.recipeName {position:absolute; width:' + widthRecipe + 'px' + ' ;cursor: pointer;text-align:center; font-size:16px;background-color: rgba(165, 174, 173, 0.3);color:#ffffff;}';
    style += '.imgRecipe {width:' + recipeDetail + 'px' + ';height:250px;}';
    style += '</style>';
    //alert(style);
    $('html > head').append($(style));
}

function setHeightContent() {
    var height = $(window).height() - 150;
    $('#gallery').height(height);

}

    
